<template>
    <div>
        <el-page-header
            content="个人中心"
            icon=""
            title="企业门户网站管理系统"
        />

        <el-row
            :gutter="20"
            class="el-row"
        >
            <el-col :span="8">
                <el-card class="box-card">
                    <el-avatar
                        :size="100"
                        :src="avatarUrl"
                    />
                    <h3>{{store.state.userInfo.username}}</h3>
                </el-card>
            </el-col>
            <el-col :span="16">
                <el-card>
                    <template #header>
                        <div class="card-header">
                            <span>个人信息</span>

                        </div>
                    </template>

                    <el-form
                        ref="userFormRef"
                        :model="userForm"
                        :rules="userFormRules"
                        label-width="120px"
                        class="demo-ruleForm"
                    >
                        <el-form-item
                            label="用户名"
                            prop="username"
                        >
                            <el-input v-model="userForm.username" />
                        </el-form-item>
                        <el-form-item
                            label="密码"
                        >
                            <el-link type="primary" @click="handelPassword">点击修改</el-link>
                        </el-form-item>
                        <!-- <el-form-item
                            label="性别"
                            prop="gender"
                        >
                            <el-select
                                v-model="userForm.gender"
                                class="m-2"
                                placeholder="Select"
                                style="width:100%"
                            >
                                <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                        <el-form-item
                            label="个人简介"
                            prop="introduction"
                        >
                            <el-input
                                v-model="userForm.introduction"
                                type="textarea"
                            />
                        </el-form-item> -->

                        <el-form-item>
                            <el-button
                                type="primary"
                                @click="submitForm()"
                            >更新</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>


        <el-dialog v-model="dialogVisible" title="修改密码" width="50%">
            <el-form :rules="pswRules">
                <el-form-item
                label="旧密码"
                prop="oldPassword"
                >
                    <el-input
                        v-model="oldPassword"
                        type="password"
                    />
            </el-form-item>
            <el-form-item
                label="新密码"
                prop="newPassword"
                >
                    <el-input
                        v-model="newPassword"
                        type="password"
                    />
            </el-form-item>
            <el-form-item
                label="再次输入新密码"
                prop="newPasswordAgain"
                >
                    <el-input
                        v-model="newPasswordAgain"
                        type="password"
                    />
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    @click="submitPassword()"
                >提交</el-button>
            </el-form-item>
            </el-form>
            
        </el-dialog>
    </div>
</template>
<script setup>
import { useStore } from "vuex";
import { computed, ref, reactive } from "vue";

import axios from 'axios'
import { ElMessage } from "element-plus";
import upload from '@/util/upload'
import Upload from '@/components/upload/Upload'
import router from "@/router";
const store = useStore();

const avatarUrl = computed(
  () =>
    store.state.userInfo.avatar
      ? 'http://localhost:3000'+store.state.userInfo.avatar
      : `https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png`
);

let dialogVisible = ref(false)
let { username, gender, introduction, avatar } = store.state.userInfo;
const userFormRef = ref();
let userForm = reactive({
  username,
  gender,
  introduction,
  password:store.state.userInfo.password,
  role:store.state.userInfo.role,
  id:store.state.userInfo.id
});
let oldPassword = ref('')
let newPassword = ref('')
let newPasswordAgain = ref('')

const userFormRules = reactive({
  username: [{ required: true, message: "请输入名字", trigger: "blur" }],
  gender: [{ required: false, message: "请选择性别", trigger: "blur" }],
  introduction: [{ required: false, message: "请输入介绍", trigger: "blur" }]
});
const pswRules = reactive({
  oldPassword: [{ message: "请输入旧密码", trigger: "blur" }],
  newPassword: [{ message: "请选择新密码", trigger: "blur" }],
  newPasswordAgain: [{ message: "请输入新密码", trigger: "blur" }]
});
//性别选择
const options = [
  {
    label: "保密",
    value: 0
  },
  {
    label: "男",
    value: 1
  },
  {
    label: "女",
    value: 2
  }
];


//更新提交
const  submitForm= ()=>{
    userFormRef.value.validate(async (valid)=>{
        if(valid){
            const res = await axios.patch("/user/updateById",userForm)
            if(res.data.code===0){
                const userInfo = await axios.get(`/user/findByUsername?username=${userForm.username}`)
                store.commit("changeUserInfo",userInfo.data.data)
                
                ElMessage.success("信息更新成功")
            } else if(res.data.code===1){
                ElMessage.error("该用户名已存在")
            }
        }
    })
}

const handelPassword = async()=>{
    dialogVisible.value = true
}

const submitPassword = async()=>{
    if(newPassword.value===''||oldPassword.value===''||newPasswordAgain.value===''){
        ElMessage.error("尚未完成填写")
    }else{
        if(newPassword.value===oldPassword.value){
            ElMessage.error("新旧密码相同")
        }else if(newPassword.value !== newPasswordAgain.value){
            ElMessage.error("两次输入新密码不一致")
        }else if(newPassword.value === newPasswordAgain.value){
            if(oldPassword.value===store.state.userInfo.password){
                await axios.patch(`/user/updatePassword?id=${store.state.userInfo.id}&password=${newPassword.value}`)
                const newInfo = await axios.get(`/user/findByUsername?username=${userForm.username}`)
                store.commit("changeUserInfo",newInfo.data.data)
                ElMessage.success("密码已更新")
                newPassword.value = ''
                newPasswordAgain.value = ''
                oldPassword.value = ''
                dialogVisible.value = false
            }else{
                ElMessage.error("旧密码错误")
            }
        }
    }
}
</script>

<style scoped lang="scss">
.el-row {
  margin-top: 20px;
  .box-card {
    text-align: center;
  }
}
.el-link {
  margin-right: 8px;
}
.el-link .el-icon--right.el-icon {
  vertical-align: text-bottom;
}
</style>
